<template>
    <div class="commentContainer">
        <h3>发表评论</h3>
        <hr>
        <textarea v-model="commentContent" placeholder="请输入要BB的内容（做多吐槽120字）"></textarea>
        <mt-button type="primary" size="large" @click="addComment">发表评论</mt-button>
        <!-- 评论 列表 区域 -->
        <div class="commentList">
            <div class="commentGroup" v-for="(item, i) in commentList" :key="item.add_time">
                <div class="title">
                    第{{ i + 1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time | timeFormat }}
                </div>
                <div class="content">{{ item.content === 'undefined' ? '这家伙很懒，什么也没有留下' : item.content }}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="addMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 评论数据列表
                commentList: [],
                // 当前 多少 页码 默认为 1
                pageIndex: 1,
                commentContent: ''
            }
        },
        created() {
            // 开始请求 评论 数据列表
            this.getCommentList()
        },
        props: ['id'],
        methods: {
            // 获取 评论数据 列表
            getCommentList() {
                this.$http.get(`api/getcomments/${ this.id }?pageindex=${ this.pageIndex }`)
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        console.log(data.message, '评论信息')
                        // 当请求过来的 评论  没有的时候 提示 一下 没有更多 评论了
                        if (!data.message.length) {
                            return this.$store.commit('ToastInfo', { msg: '没有更多评论了~亲' })
                        }
                        // 1 用 concat 连接 两个 数组 2 用 展开运算符
                        this.commentList = [...this.commentList, ...data.message]
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            },
            // 发表评论
            addComment() {
                /*
                *  处理 评论 信息
                *  1、去除空格 之类 判断长度
                *  2、为空 不做处理 提示 请输入 内容
                *  3、非空 添加到 评论
                *  4、手动 unshift 更新
                *  5、重置 commentContent
                * */
                var value = this.commentContent.trim()
                // 数据为空
                if (!value.length) {
                    return this.$store.commit('ToastInfo', { msg: '评论不能为空哦' })
                }
                // 发送请求 添加 数据
                this.$http.post(`api/postcomment/${ this.id }`, { content: value })
                    .then(function (data) {
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        //  success  添加 { user_name: '匿名用户', add_time: Date.now(), content: value }
                        var newComment = { user_name: '匿名用户', add_time: Date.now(), content: value }
                        this.commentList.unshift(newComment)
                        // 重置
                        this.commentContent = ''
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error', pos: 'middle' })
                    })
            },
            // 加载更多
            addMore() {
                this.pageIndex++
                this.getCommentList()
            }
        }
    }
</script>

<style scoped lang="less">
    .commentContainer {
        textarea {
            border: 1px solid #ccc;
            height: 85px;
            font-size: 14px;
            border-radius: 4px;
            margin: 0;
        }
        .commentList {
            padding: 5px 0;
            .commentGroup {
                font-size: 13px;
                .title {
                    background-color: #ccc;
                    line-height: 30px;
                }
                .content {
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>